import React, { PureComponent } from 'react'

import TopTabs from '@/components/tabs/tabs'
import Music from './page/music/music'
import Recommonend from './page/recommend/recommend'
import { changePlayingMusicSrc, changePlayingMusicLyric, changePlayingMusicPlan } from '@/store/actions/common.js'
import { getMusicRecommendMove } from '@/store/actions/home.js'

import { connect } from 'react-redux'

import api from './api'

import './home.scss'

@connect((store) => {
  return { ...store.common, ...store.home }
}, (dispatch) => ({
  changePlayingMusicSrc (data) {
    dispatch(changePlayingMusicSrc(data))
  },
  changePlayingMusicLyric (data) {
    dispatch(changePlayingMusicLyric(data))
  },
  getMusicRecommendMove () {
    dispatch(getMusicRecommendMove())
  },
  changePlayingMusicPlan (data) {
    dispatch(changePlayingMusicPlan(data))
  },
}))

export default class Home extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      playlist: {},
      palyerId: null,
      bannerMusicRoom: []
    }
  }
  // src\store\actions\common.js

  componentDidMount () {
    api.getNewSong().then(res => {
      this.setState((prevState) => {
        const { data } = res
        this.props.changePlayingMusicPlan({
          list: data,
          playId: '',
        })
        return { ...prevState, playlist: data }
      })
     
    })
    this.props.changePlayingMusicLyric()
    this.props.getMusicRecommendMove()
    api.search('听妈妈的话')
    this.getBannerMusicRoom()
  }

  // 跳转歌单详情
  jumpOriginalDetailWithId = (id) => {
    this.props.history.push('/originalDetail/' + id)
  }


  // 获取音乐馆banner
  getBannerMusicRoom = () => {
    return api.getBannerMusicRoom(1).then(res => {
      const { banners } = res
      this.setState({
        bannerMusicRoom: banners
      })
    })
  }

  palyerIdChange = (data, playingList) => {
    const { id } = data
    this.setState((prevState) => {
      return { ...prevState, palyerId: data.id }
    })
    this.props.changePlayingMusicSrc({
      name: data.name,
      img: data.album.blurPicUrl,
      mp3Url: data.mp3Url,
      ...data,
    })

    this.props.changePlayingMusicPlan({
      list: playingList,
      playId: id,
    })

  }
  
  render () {
    const { musicRecommendMove } = this.props
    const { playlist, palyerId, bannerMusicRoom } = this.state
    let tabs = [
      {
        title: '推荐', key: 1
      },
      {
        title: '音乐馆', key: 2
      },
      {
        title: '电台', key: 3
      },
    ]
    return (
      <div className='home'>
        <TopTabs dataSource={tabs} defaultKey={2}>
          {/* 推荐 */}
          <Recommonend
            jumpOriginalDetailWithId={this.jumpOriginalDetailWithId}
          />
          {/* 音乐馆 */}
          <Music
            jumpOriginalDetailWithId={this.jumpOriginalDetailWithId}
            getBannerMusicRoom={ this.getBannerMusicRoom }
            musicRecommendMove={musicRecommendMove}
            bannerMusicRoom={bannerMusicRoom}
            musicList={ playlist }
            palyerId={ palyerId }
            palyerIdChange={ this.palyerIdChange }
            changePlayingMusicSrc={changePlayingMusicSrc}
          />
          {/* 电台 */}
          <Recommonend />
        </TopTabs>
      </div>
    )
  }
}